<template>
	<uni-nav-bar color="#fff" :fixed="true" background-color="" status-bar left-icon="left" left-text="" title="" @clickLeft="back" />
	<view class="content">
		<view class="header">
			<view class="header-logo">
				<image src="../../static/index/heade-logo-tuya.png" mode=""></image>
			</view>
		</view>
		<view class="main">
			<view class="main-item">
				<image class="title" style="margin-left: 30rpx;" src="../../static/my/会员卡标题@2x-tuya.png" mode="widthFix"></image>
			</view>
			<view class="main-jifen">
				<text>我的积分 {{data.points}}</text>
			</view>
			<view class="main-card">
				<image src="../../static/my/会员卡@2x.png" mode="widthFix"></image>
			</view>
			<view class="main-tip">
				<view class="tip-item">
					<text></text> 此处可以以放一些会员机制，积分奖励之类的说明信息，积分使用规则。加入会员的优势等文字信息。
				</view>
				<view class="tip-item">
					<text></text> 此处可以以放一些会员机制，积分奖励之类的说明信息，积分使用规则。加入会员的优势等文字信息。
				</view>
			</view>
			<view class="main-button">
				<text>立即领取 | 免费领取</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import TabBar from '@/components/TabBar.vue';
import { reactive } from 'vue';
const data = reactive({
	bannerData: [
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
	],
	cardStatus: false,
	points: '---'
})

const back = () => {
	uni.navigateBack({
		delta: 1
	})
}
</script>

<style lang="scss" scoped>
	.content {
		.header {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			.header-logo > image {
				width: 100%;
				height: 330rpx;
			}
		}
		.main {
			width: 100%;
			height: auto;
			background: #FFFFFF;
			border-radius: 70rpx 70rpx 0rpx 0rpx;
			position: absolute;
			top: 200rpx;
			padding-top: 30rpx;
			padding-bottom: 200rpx;
			.main-item {
				padding-right: 30rpx;
				margin-top: 20rpx;
				.title {
					width: 562rpx;
				}
			}
			.main-jifen {
				font-size: 40rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #000000;
				padding: 0rpx 36rpx;
				line-height: 56rpx;
				margin-bottom: 14rpx;
			}
			.main-card {
				width: 678rpx;
				margin: 0 auto;
				image {
					width: 100%;
					box-sizing: border-box;
					box-sizing: border-box;
				}
			}
			.main-tip {
				padding: 0rpx 36rpx;
				margin-top: 22rpx;
				.tip-item {
					text {
						margin: 0rpx 20rpx;
						display: inline-block;
						border-radius: 50%;
						width: 20rpx;
						height: 20rpx;
						background: #000000;
					}
				}
			}
			.main-button {
				position: fixed;
				bottom: 20rpx;
				left: 0;
				right: 0;
				width: 678rpx;
				height: 92rpx;
				margin: 0 auto;
				background-color: #000000;
				border-radius: 100rpx;
				color: #fff;
				font-size: 30rpx;
				line-height: 92rpx;
				text-align: center;
			}
		}
	}

</style>
